import React from "react";
import { Table, Space, Button,Modal} from "antd";
import { del, getById } from "../../../services/student";
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { setUpdateVisible,fetchStudent } from "../../../store/slices/studentSlice";
import {useDispatch} from 'react-redux';
const { Column } = Table;
const { confirm } = Modal;

export default function List({show,students,pagination,setStudent}) {
    let dispatch = useDispatch();
    const handleUpdate = async (id) => {
        // let {data} = await getById(id);
        // console.log(data);
        // setStudent(data);
        dispatch(fetchStudent(id));
        dispatch(setUpdateVisible(true));
    }
    const handleDel = async (id) => {
        confirm({
            title: '是否确认删除?',
            icon: <ExclamationCircleOutlined />,
            content: '删除当前学生',
            async onOk() {
                await del(id);
                show();
            }
          });
        
    }
    const handleChange = ({current,pageSize}) => {
        show({current,pageSize});
    }
    return (
        <Table rowKey="_id" dataSource={students} pagination={pagination} onChange={handleChange}>
            <Column title="姓名" dataIndex="name" key="name" />
            <Column title="年龄" dataIndex="age" key="age" />
            <Column title="性别" dataIndex="gender" key="gender" />
            <Column
                title="操作"
                key="action"
                render={(text, record) => (
                    <Space size="middle">
                        <Button type="primary" onClick={() => handleUpdate(record._id)}>
                            修改
                        </Button>
                        <Button type="primary" danger onClick={() => handleDel(record._id)}>
                            删除
                        </Button>
                    </Space>
                )}
            />
        </Table>
    );
}
